<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<!--在这里写你的css-->
<div th:fragment="stylesheet">
    <link rel="stylesheet" href="/static/common/assets/vendor/datatables/css-main/jquery.dataTables.min.css">
    <link rel="stylesheet" href="/static/common/assets/vendor/datatables/css-bootstrap/dataTables.bootstrap.min.css">
</div>
<!--在这里写你的内容-->

<body th:fragment="content">
<div class="panel" style="padding: 10px">
    <div class="panel-heading">
        <h3 class="panel-title">查看健康卡信息</h3>
    </div>
    <div class="panel-body">
        <table id="datatable-column-filter" class="table table-striped table-hover">
            <thead>
            <tr>
                <th>vip编号</th>
                <th>用户账号</th>
                <th>手机号</th>
                <th>到期时间</th>
            </tr>
            </thead>
            <tbody>
            <tr th:each="vipContent:${vipContents}">
                <td th:text="${vipContent.vip_id}"></td>
                <td th:text="${vipContent.personal_account_id}"></td>
                <td th:text="${vipContent.user_tel}"></td>
                <td th:text="${vipContent.expirationTime}"></td>
            </tr>

            </tbody>
        </table>
    </div>
</div>
<!-- END FILTER COLUMN -->

</body>
<!--在这里定义或者引用你的script-->
<div th:fragment="script">
    <script src="/static/common/assets/vendor/datatables/js-main/jquery.dataTables.min.js"></script>
    <script src="/static/common/assets/vendor/datatables/js-bootstrap/dataTables.bootstrap.min.js"></script>
    <script src="/static/common/assets/vendor/datatables-colreorder/dataTables.colReorder.js"></script>
    <script src="/static/common/assets/vendor/datatables-tabletools/js/dataTables.tableTools.js"></script>
    <script src="/static/common/assets/vendor/scripts/klorofilpro-common.min.js"></script>
    <link rel="stylesheet" href="/static/common/assets/vendor/themify-icons/css/themify-icons.css">
    <script>
        $(function()
        {
            // datatable column with reorder extension
            $('#datatable-column-reorder').dataTable(
                {
                    pagingType: "full_numbers",
                    sDom: "RC" +
                    "t" +
                    "<'row'<'col-sm-6'i><'col-sm-6'p>>",
                    colReorder: true,
                });
            // datatable with column filter enabled
            var dtTable = $('#datatable-column-filter').DataTable(
                { // use DataTable, not dataTable
                    sDom: // redefine sDom without lengthChange and default search box
                    "t" +
                    "<'row'<'col-sm-6'i><'col-sm-6'p>>"
                });
            $('#datatable-column-filter thead').append('<tr class="row-filter"><th></th><th></th><th></th><th></th></tr>');
            $('#datatable-column-filter thead .row-filter th').each(function()
            {
                $(this).html('<input type="text" class="form-control input-sm" placeholder="Search...">');
            });
            $('#datatable-column-filter .row-filter input').on('keyup change', function()
            {
                dtTable
                    .column($(this).parent().index() + ':visible')
                    .search(this.value)
                    .draw();
            });
            // datatable with paging options and live search
            $('#featured-datatable').dataTable(
                {
                    sDom: "<'row'<'col-sm-6'l><'col-sm-6'f>r>t<'row'<'col-sm-6'i><'col-sm-6'p>>",
                });
            // datatable with export feature
            var exportTable = $('#datatable-data-export').DataTable(
                {
                    sDom: "T<'clearfix'>" +
                    "<'row'<'col-sm-6'l><'col-sm-6'f>r>" +
                    "t" +
                    "<'row'<'col-sm-6'i><'col-sm-6'p>>",
                    "tableTools":
                        {
                            "sSwfPath": "assets/vendor/datatables-tabletools/swf/copy_csv_xls_pdf.swf"
                        }
                });
            // datatable with scrolling
            $('#datatable-basic-scrolling').dataTable(
                {
                    scrollY: "300px",
                    scrollCollapse: true,
                    paging: false
                });
        });
    </script>
</div>

</html>